<template>
  <div>
    <div>
        <div class="high-img">
            <span  class="iconfont icon-arrow-left-bold high-arrow" @click="$router.push({name:'Home'})"></span>
            <span class="high-txt">{{coverName}}</span>
            <img class="auto-img" :src="coverImg" alt="">
        </div>
      <ul class="high-ul">
        <li class="high-li" v-for="(item) in musicList" :key="item.id" @click="playMusic(item.id)">
          <lemon-list :option="item" ></lemon-list>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
//接口js文件
import {getPlaylistDetail} from "../../api/rank"
//音乐列表组件
import LemonList from "../search/LemonList.vue";
export default {
  components: {
    LemonList,
  },
  data() {
    return {
        musicList:[],
        coverImg:null,
        coverName: '',
    };
  },
  created() {
    //   
      this.getPlaylistDetailFun(this.$route.query.id);
  },
  methods: {
    getPlaylistDetailFun(id) {
      getPlaylistDetail({ id }).then((data) => {
        // 
        this.coverImg=data.playlist.coverImgUrl;
        this.coverName=data.playlist.name;
        this.musicList=data.playlist.tracks;
      });
    },
    playMusic(id) {
        this.$emit("get-player-id", id);
    }
  },
};
</script>

<style lang="less" scoped>
.high-li{
    padding:5px 0;
}
.high-img {
    width:100%;
    height:200px;
    position: relative;
    .high-arrow{
        position: absolute;
        top:10px;
        left:10px;
        z-index:3;
        color:#DB9A9D;
        font-size:24px;
        font-weight:bold;
    }
    .high-txt{
        position:absolute;
        bottom:20px;
        font-size:18px;
        font-weight:bold;
        color:#fff;
        left:10px;
        z-index:2;
    }
    .auto-img{
        width:100%;
        height:200px;
        display: block;
        position:absolute;
        top:0;
        left:0;
    }
}
</style>